<!-- GoogleTtsComponent.vue -->
<template>
  <div class="google-tts-settings">
    <div class="setting-header">
      <h3>谷歌 TTS 设置</h3>
    </div>

    <t-alert>
      此模型需要您提供目标语言的文本。不会自动翻译内容，仅朗读您提供的文本。
    </t-alert>

    <div class="settings-container">
      <!-- 第一行：语言和性别 -->
      <div class="settings-row">
        <!-- 语言选择 -->
        <div class="setting-item">
          <div class="setting-label">语言:</div>
          <t-select
            v-model="selectedLanguage"
            placeholder="选择语言"
            class="setting-select"
            :loading="isLoading"
            @change="onLanguageChange"
          >
            <t-option
              v-for="language in availableLanguages"
              :key="language"
              :value="language"
              :label="formatLanguage(language)"
            >
              {{ formatLanguage(language) }}
            </t-option>
          </t-select>
        </div>

        <!-- 性别选择 -->
        <div class="setting-item">
          <div class="setting-label">性别:</div>
          <t-select
            v-model="selectedGender"
            placeholder="选择性别"
            class="setting-select"
            :disabled="!selectedLanguage"
            @change="onGenderChange"
          >
            <t-option
              v-for="gender in availableGenders"
              :key="gender"
              :value="gender"
              :label="formatGender(gender)"
            >
              {{ formatGender(gender) }}
            </t-option>
          </t-select>
        </div>
      </div>

      <!-- 第二行：音色和语速 -->
      <div class="settings-row">
        <!-- 音色选择 -->
        <div class="setting-item">
          <div class="setting-label">音色:</div>
          <t-select
            v-model="selectedVoice"
            placeholder="选择音色"
            class="setting-select"
            :disabled="!selectedLanguage || !selectedGender"
          >
            <t-option
              v-for="voice in availableVoices"
              :key="voice.name"
              :value="voice.name"
              :label="voice.name"
            >
              {{ formatVoiceName(voice.name) }}
            </t-option>
          </t-select>
        </div>

        <!-- 语音速度设置 -->
        <div class="setting-item slider-container">
          <div class="setting-label">语速: {{ speakingRate.toFixed(2) }}</div>
          <t-slider
            v-model="speakingRate"
            :min="0.25"
            :max="4"
            :step="0.05"
            class="setting-slider"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';

const props = defineProps({
  voices: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:settings']);

// 状态变量
const selectedLanguage = ref('');
const selectedGender = ref('');
const selectedVoice = ref('');
const speakingRate = ref(1.0);
const isLoading = ref(false);

// 计算可用语言列表
const availableLanguages = computed(() => {
  return Object.keys(props.voices || {});
});

// 计算可用性别
const availableGenders = computed(() => {
  if (!selectedLanguage.value || !props.voices[selectedLanguage.value]) {
    return [];
  }
  return Object.keys(props.voices[selectedLanguage.value]);
});

// 计算可用音色
const availableVoices = computed(() => {
  if (!selectedLanguage.value || !selectedGender.value ||
    !props.voices[selectedLanguage.value] ||
    !props.voices[selectedLanguage.value][selectedGender.value]) {
    return [];
  }
  return props.voices[selectedLanguage.value][selectedGender.value];
});

// 监视选择变化，更新设置
watch([selectedLanguage, selectedGender, selectedVoice, speakingRate], () => {
  emit('update:settings', {
    languageCode: selectedLanguage.value,
    ssmlGender: selectedGender.value,
    name: selectedVoice.value,
    speakingRate: speakingRate.value
  });
});

// 格式化语言显示
const formatLanguage = (code) => {
  const languageMap = {
    'cmn-CN': '中文（简体）',
    'en-US': '英语（美国）',
    'th-TH': '泰语',
    'vi-VN': '越南语'
  };
  return languageMap[code] || code;
};

// 格式化性别显示
const formatGender = (gender) => {
  return gender === 'FEMALE' ? '女声' : '男声';
};

// 格式化音色名称显示
const formatVoiceName = (name) => {
  if (typeof name !== 'string') return '未知音色';

  if (name.includes('Studio')) {
    return name + ', Studio';
  } else if (name.includes('Standard')) {
    return name + ', 标准';
  } else {
    return name + ', 高级';
  }
};


// 语言变化时处理
const onLanguageChange = () => {
  // 重置性别和音色
  selectedGender.value = '';
  selectedVoice.value = '';

  // 如果只有一个性别选项，自动选择
  if (availableGenders.value.length === 1) {
    selectedGender.value = availableGenders.value[0];
    onGenderChange();
  }
};

// 性别变化时处理
const onGenderChange = () => {
  // 重置音色
  selectedVoice.value = '';

  // 如果只有一个音色选项，自动选择
  if (availableVoices.value.length === 1) {
    selectedVoice.value = availableVoices.value[0].name;
  }
};

// 组件挂载时，如果有可用语言，自动选择第一个
onMounted(() => {
  if (availableLanguages.value.length > 0) {
    selectedLanguage.value = availableLanguages.value[0];
    onLanguageChange();
  }
});
</script>

<style scoped>
.google-tts-settings {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f9f9f9;
}

.setting-header {
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.setting-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.settings-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.setting-item {
  flex: 1;
  min-width: 0; /* 防止flex子项溢出 */
}

.setting-label {
  margin-bottom: 6px;
  font-size: 14px;
  color: #666;
}

.setting-select {
  width: 100%;
}

.slider-container {
  display: flex;
  flex-direction: column;
}

.setting-slider {
  width: 100%;
  margin-top: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .settings-row {
    flex-direction: column;
  }
}
</style>
